<template>
  <div class="pk-page">
    <el-pagination
      background
      :layout="layout"
      :page-size="pageSize" 
      :total="total"
      v-bind="$attrs"
      :size="size"
      @change="onChange"
      >
    </el-pagination>
  </div>
</template>

<script setup>
 import { ref, defineProps, defineEmits } from 'vue'
 defineProps({
  total: {
    type: [String, Number],
    default: 1000
  },
  size: {
    type: String,
    default: 'small'
  },
  layout: {
    type: String,
    default: 'prev, pager, next'
  },
  pageSize: {
    type: [String, Number],
    default: 10
  },
  pagerCount: {
    type: [String, Number],
    default: 10
  },
 })
 const emits = defineEmits(['onSize'])
 const onChange = (e) => {
  emits('onSize', e)
 }
</script>

<style lang="scss" scoped>
::v-deep .el-pagination.is-background .el-pager li{
  background: #fff;
}
::v-deep .el-pagination.is-background .el-pager li.is-active{
  background: rgb(22, 100, 255)!important;
}
::v-deep .el-pagination .is-first{
  background: #fff;
}

::v-deep .el-pagination .is-last{
  background: #fff;
}
</style>